<template>
	<view class="box">
		<view class="header">
			<view class="search">
				<u-icon name="search" class="icon"></u-icon>
				<input type="text" placeholder="请输入订单号" maxlength="28" v-model="getNumData"/>
			</view>
			<view class="word" @click="searchClick">搜索</view>
		</view>
		<view class="tab">
			<view class="left">
				<view class="select">
					<view class="select-top">
						<view class="tabs">
							<view class="tab" v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)">
								<text class="tab-text" :class="{word:currentIndex === index}">{{ tab.title }}</text>
								<view class="tab-marker" :class="{ 'active': currentIndex === index }"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="right">2</view> -->
		</view>
		<template v-for="item in feedBack">
			<view class="container" v-if="currentIndex===0" :key="item.orderId" @click="splitClick(0,item.orderConsultId)">
				<view class="smallBox">
					<view class="topBox">
						<view style="width: 140rpx;letter-spacing: 7.99rpx;margin-bottom: 20rpx;">订单号 :</view>
						<view class="span">{{item.orderId}}</view>
					</view>
					<view class="topBox">
						<view style="margin-right: 8rpx;" class="refer">反馈问题 :</view>
						<view class="span">{{item.content}}</view>
					</view>
				</view>
			</view>
		</template>
		<template v-for="item in replit">
			<view class="container" v-if="currentIndex===1" :key="item.orderId" @click="splitClick(1,item.orderConsultId)">
				<view class="smallBox">
					<view class="topBox">
						<view style="width: 140rpx;letter-spacing: 7.99rpx;margin-bottom: 20rpx;">订单号 :</view>
						<view class="span">{{item.orderId}}</view>
					</view>
					<view class="topBox">
						<view style="margin-right: 8rpx;" class="refer">反馈问题 :</view>
						<view class="span">{{item.content}}</view>
					</view>
				</view>
			</view>
		</template>
		<view class="button">
			<view class="center">
				<u-button type="primary" shape="circle" @click="feedClick">发起反馈</u-button>
			</view>
		</view>
		<view class="model" v-if="modelData">
			<view class="content">
				<view class="title">订单号</view>
				<view class="back">
					<input type="text" placeholder="请输入订单号" v-model="numOrder"/>
				</view>
				<view class="des">详细说明</view>
				<u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight"
					placeholder="请输入详细说明" />
				<view class="u-slider__buttonn">
					<u-button type="primary" size="medium" @click="actionClick(0)">取消</u-button>
					<u-button type="primary" size="medium" @click="actionClick(1)">确定</u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		orderConsult,orderConsultList
	} from "@/apis/orderConsult.js"
	export default {
		data() {
			return {
				tabs: [{
						title: '已回复'
					},
					{
						title: '已反馈'
					}
				],
				currentIndex: 0,
				value: '',
				numOrder: '',
				type: 'textarea',
				border: true,
				height: 130,
				autoHeight: true,
				modelData: false,
				feedBack:[],
				replit:[],
				getNumData:'',
				currentPage: 1, // 当前页码
				pageSize: 50 // 每页显示的数量
			}
		},
		onShow() {
			orderConsultList({
				state:'2',
				orderId:this.getNumData,
				size:this.pageSize,
				current:this.currentPage
			})
			.then(res=>{
				this.feedBack = res.data.records
			})
		},
		methods: {
			splitClick(key,val){
				if(key===1){
					uni.navigateTo({
						url:`/pages/consultDetail/consultDetail?id=${val}&feedType=1`
					})
				}else if(key===0){
					uni.navigateTo({
						url:`/pages/consultDetail/consultDetail?id=${val}&feedType=0`
					})
				}
				
			},
			searchClick(){
				// 搜索判断当前tab的值
				if(this.currentIndex === 0){
					orderConsultList({
						state:'2',
						orderId:this.getNumData,
						size:this.pageSize,
						current:this.currentPage
					})
					.then(res=>{
						this.feedBack = res.data.records
					})
				}else if(this.currentIndex === 1){
					orderConsultList({
						state:'1',
						orderId:this.getNumData,
						size:this.pageSize,
						current:this.currentPage
					})
					.then(res=>{
						if(res.code===200){
							this.replit = res.data.records;
						}
					})
				}
				
			},
			selectTab(index) {
				this.currentIndex = index;
				if(index===1){
					orderConsultList({
						state:'1',
						orderId:this.getNumData,
						size:this.pageSize,
						current:this.currentPage
					})
					.then(res=>{
						if(res.code===200){
							this.replit = res.data.records;
						}
					})
				}else if(index===0){
					orderConsultList({
						state:'2',
						orderId:this.getNumData,
						size:this.pageSize,
						current:this.currentPage
					})
					.then(res=>{
						if(res.code===200){
							this.replit = res.data.records;
						}
					})
				}
			},
			feedClick() {
				this.modelData = true;
			},
			actionClick(val) {
				if (val === 1) {
					// 发起反馈发接口
					if (this.numOrder == '' || this.value == '') {
						this.$refs.uToast.show({
							title: '请输入完整信息',
							type: 'error'
						})
						return;
					}
					orderConsult({
							orderId: this.numOrder,
							content: this.value,
							type: '1'
						})
						.then(res => {
                            if(res.code===200){
								this.$refs.uToast.show({
									title: res.msg,
									type: 'success'
								})
								this.numOrder = '';
								this.value = '';
								this.modelData = false;
							}else{
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								})
							}
						})
				}else{
					//取消
					this.modelData = false;
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		width: 750rpx;
		background-color: #F0EFF4;

		.header {
			width: 100%;
			height: 200rpx;
			background-color: #1890FF;
			padding: 0 30rpx;
			// border: 1rpx solid #3300FD;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search {
				width: 88%;
				height: 60rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				background-color: white;
				margin-bottom: 20rpx;

				input {
					margin: 0 20rpx 0 0rpx;
					width: 600rpx;
				}

				.icon {
					margin: 0 20rpx;
				}
			}

			.word {
				height: 100%;
				line-height: 200rpx;
				width: 70rpx;
				margin-bottom: 25rpx;
				color: white;
			}
		}

		.tab {
			width: 100%;
			height: 80rpx;
			background-color: white;
			display: flex;
			margin-bottom: 30rpx;

			.left {
				height: 100%;
				width: 100%;

				.select {
					height: 80rpx;
					// margin: 8rpx 20rpx 10rpx 20rpx;
					background-color: white;
					border-radius: 15rpx;
					display: flex;
					flex-direction: column;
					margin-bottom: 10rpx;

					.select-top {
						height: 100%;
						width: 100%;

						.tabs {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 100%;
							width: 100%;
						}

						.tab {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							height: 100%;
							width: 50%;
							overflow: hidden;
						}

						.tab-text {
							/* 文字样式 */
							color: gray;
						}

						.word {
							color: black;
						}

						.wordData {
							color: #2D9FFD;
							font-weight: 1000;
						}

						.tab-marker {
							width: 0;
							height: 2px;
							background-color: #2D9FFD;
							/* 标记颜色 */
							transition: width 0.4s ease;
							/* 动画效果 */
							margin-top: 12rpx;
						}

						.tab-marker.active {
							width: 12%;
						}

						.tab-text-class {
							width: 0;
							height: 2px;
							// background-color: #2D9FFD;
							/* 标记颜色 */
							transition: width 0.4s ease;
							/* 动画效果 */
							margin-top: 10rpx;
						}

						.activeClass {
							width: 30%;
							height: 2px;
							background-color: #2D9FFD;
							/* 标记颜色 */
							transition: width 0.4s ease;
							/* 动画效果 */
							margin-top: 10rpx;
						}
					}
				}
			}
		}
		.container{
			width: 100%;
			background-color: #F0EFF4;
			padding:0 32rpx 25rpx 32rpx;
			box-sizing: border-box;
			.smallBox{
				width: 100%;
				min-height: 185rpx;
				border-radius: 20rpx;
				background-color: white;
				padding: 25rpx 25rpx 15rpx 25rpx;
				box-sizing: border-box;
				.topBox{
					width: 100%;
					min-height: 50rpx;
					// display: flex;
					// align-items: center;
					margin-bottom: 30rpx;
					.span{
						  height: 100%;
						  white-space: normal;
						  word-break: break-all;
						  padding-left: 30rpx;
						  box-sizing: border-box;
						  letter-spacing: 3rpx;
						  line-height: 1.6;
					}
					.refer{
						width: 130rpx;
						height: 100%;
						margin-bottom: 20rpx;
					}
				}
			}
		}

		.button {
			width: 100%;
			height: 115rpx;
			background-color: white;
			display: flex;
			justify-content: center;
			align-items: center;

			.center {
				height: 70%;
				width: 70%;

			}
		}

		.model {
			height: 100vh;
			width: 750rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			background-color: rgba(51, 51, 51, .4);
			padding: 320rpx 32rpx 0 32rpx;
			box-sizing: border-box;

			.content {
				width: 100%;
				height: 640rpx;
				background-color: white;
				border-radius: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				color: #656565;
				overflow: hidden;

				.title {

					margin-bottom: 35rpx;
				}

				.back {
					width: 100%;
					height: 90rpx;
					background-color: #F8F9FD;
					border-radius: 20rpx;
					display: flex;
					align-items: center;

					input {
						width: 92%;
						height: 60rpx;
						padding-left: 30rpx;
						box-sizing: border-box;
					}
				}

				// .submit{
				.des {
					margin: 35rpx 0;
				}

				.u-slider__buttonn {
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-around;
					margin-top: 52rpx;
				}

				// 	width: 100%;
				// 	height: 100rpx;
				// }
			}
		}
	}
</style>